import React, { CSSProperties } from 'react'
import { Avatar } from '@material-ui/core'
import { Link } from 'react-router-dom'
import { inject, observer } from 'mobx-react'
import UserStore from '../../../store/modules/userStore'
import {PowerSettingsNew} from '@material-ui/icons'
import Message from '../../../components/Message/Message'

const ShowUserStyle: CSSProperties = {
    height: '30vh',
    backgroundColor: '#9c27b0',
    position: 'relative'
}
const userInfoStyle: CSSProperties = {
    position: 'absolute',
    top: '50%',
    left: '5%',
    transform: 'translateY(-50%)',
    display: 'flex',
    alignItems: 'center'
}
const userInfoText: CSSProperties = {
    color: '#fff',
    fontSize: '16px',
    marginLeft: '4vw'
}
const extrafoot: CSSProperties = {
    position: 'absolute',
    bottom: 0,
    left: '50%',
    transform: 'translateX(-50%)',
    borderRadius: '15px 15px 0 0',
    backgroundColor: '#252525',
    width: '90vw',
    height: '5vh',
    display: 'flex',
    padding: '1.65vh 4vw'
}
const outLoginBtn: CSSProperties = {
    position: 'absolute',
    top: '15%',
    right: '7%',
    backgroundColor: '#fff',
    borderRadius: '50%'
}
interface IProps {
    userStore?: UserStore
}
const ShowUser = (props: IProps) => {
    const outLogin = () => {
        props.userStore?.outLogin()
        localStorage.removeItem('token')
        if(!props.userStore?.isLogin){
            Message('success','退出登录成功')
        }else{
            Message('error','退出登录失败')
        }
    }
    return (
        <div style={ShowUserStyle}>
            
            {/* 头像及信息 */}
            {
                props.userStore?.isLogin ?
                    (
                        <>
                        <PowerSettingsNew fontSize='medium' color='error' style={outLoginBtn} onClick={outLogin}/>
                        <div style={userInfoStyle}>
                            <Avatar alt="default" src={props.userStore.userInfo.avatar} sx={{ width: 70, height: 70 }} />
                            <span style={userInfoText}>{props.userStore.userInfo.nickName}</span>
                        </div>
                        </>
                    ) :
                    (
                        <Link to='/login'>
                            <div style={userInfoStyle}>
                                <Avatar alt="default" src="/assets/picsrc/defaultAvatar.png" sx={{ width: 70, height: 70 }} />
                                <span style={userInfoText}>登录 | 注册</span>
                            </div>
                        </Link>
                    )
            }
            {/* 底部额外样式 */}
            <div style={extrafoot}>
                <img src="/assets/picsrc/userinfo1.png" alt="" style={{ marginRight: '4vw' }} />
                <img src="/assets/picsrc/userinfo2.png" alt="" style={{ marginRight: '4vw' }} />
                <img src="/assets/picsrc/userinfo3.png" alt="" style={{ marginRight: '4vw' }} />
            </div>
        </div >
    )
}

export default inject('userStore')(observer(ShowUser))